<script setup lang="ts">
import { useFullscreen } from "@vueuse/core";
import { ref } from "vue";
import { Button } from "ant-design-vue";

const testRef = ref();
const { isFullscreen, toggle, enter, exit } = useFullscreen(testRef);
</script>
<template>
  <div>
    响应式Fullscreen
    API。它添加了以全屏模式呈现特定元素(及其后代)的方法，并在不再需要时退出全屏模式。
    这使得可以使用用户的整个屏幕呈现所需的内容(例如在线游戏)，从屏幕上隐藏所有的浏览器用户界面以及
    其他应用，直到关闭全屏模式。
  </div>
  <div class="flex items-center">
    <div class="test bg-gray-50" ref="testRef">全屏测试
      <Button type="primary" v-if="isFullscreen"  @click="exit">退出全屏</Button>
    </div>
    <Button type="primary" v-if="!isFullscreen" @click="enter">全屏</Button>
  </div>
</template>
<style scoped lang="less"></style>
